<!-- 账户安全 -->
<template>
  <div class="PimRecord3">
    <!-- <van-panel :icon="icon" title="密码登陆">
      <div>安全性高的密码可以使账号更安全。建议您定期更换密码，且设置一个包含数字和字母，并长度超过6位以上的密码。</div>
      <div slot="footer">
        <van-button size="small" type="info" @click="show = true">修改</van-button>
      </div>
    </van-panel>
    <van-dialog v-model="show" title="修改密码" :beforeClose="beforeClose" show-cancel-button>
      <van-form>
        <van-field v-model="password" type="password" label="新密码：" placeholder="请输入新密码" />
        <van-field
          v-model="newpassword"
          type="password"
          name="newpassword"
          label="确认密码："
          placeholder="请确认新密码"
        />
      </van-form>
    </van-dialog> -->

    <van-panel :icon="icon2" title="手机验证">
      <h5>
        <span
          v-show="this.phone"
          style="
              display: inline-block;
              width:160px; 
              background: #ddd; 
              margin:0; 
              margin-right:30px;
              text-align: center"
        >{{ myPhone }}</span>
        <b v-if="this.phone">(已验证)</b>
        <b v-else>未进行验证......</b>
      </h5>
      <div slot="footer">
        <van-button size="small" type="info" @click="show1 = true">重新绑定手机</van-button>
      </div>
    </van-panel>
    <van-dialog v-model="show1" title="重新绑定手机" :beforeClose="beforeClosePhone" show-cancel-button>
      <van-form>
        <van-field v-model="newphone" type="tel" label="新手机号：" placeholder="请输入手机号" />
        <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <van-button slot="button" size="small" type="primary" @click="SendMobileCode">发送验证码</van-button>
        </van-field>
      </van-form>
    </van-dialog>

    <!-- <van-panel :icon="icon3" title="绑定邮箱">
      <h5>
        <span
          v-show="$store.state.mail"
          style="
              display: inline-block;
              width:90%; 
              background: #ddd; 
              margin:0; 
              margin-right:30px;
              text-align: center
              "
        >***@***</span>
        <b v-if="$store.state.mail">(已验证)</b>
        <b v-else>(未绑定)</b>
      </h5>
      <div slot="footer">
        <van-button size="small" type="info" @click="show2 = true">绑定邮箱</van-button>
      </div>
    </van-panel>
    <van-dialog v-model="show2" title="绑定邮箱" :beforeClose="beforeCloseMail" show-cancel-button>
      <van-form>
        <van-field v-model="mail" type="tel" label="邮箱：" placeholder="请输入邮箱" />
        <van-field v-model="mailcode" center clearable label="邮箱验证码" placeholder="请输入邮箱验证码">
          <van-button slot="button" size="small" type="primary" @click="mailBox">发送验证码</van-button>
        </van-field>
      </van-form>
    </van-dialog> -->
  </div>
</template>

<script>
export default {
  name: "PimRecord3",
  data() {
    return {
      icon: "",
      icon2: "",
      icon3: "",
      show: false,
      show1: false,
      show2: false,
      //修改密码
      password: "",
      newpassword: "",
      oldpassword: "",
      //手机验证
    phone:'',
      newphone: "",
      sms: "",
      myPhone: "",
      //邮箱验证
      mail: "",
      mailcode: ""
    };
  },
  methods: {
   
    //修改密码
    beforeClose(action, done) {
      if (action === "confirm") {
        if (this.password != this.newpassword) {
          this.$toast("两次密码不一样");
          console.log("两次密码不一样");
          done(false); //不关闭弹框
        } else if (!this.password || !this.newpassword) {
          this.$toast("密码不能为空");

          done(false); //不关闭弹框
        }
        setTimeout(done, 1000);
        let status = "pwd";
        let user_id = window.localStorage.getItem("user_id");
        let param = {};
        param.pwd = this.newpassword;

        // console.log(status, user_id, param)
        let newpassword = this.$http({
          method: "post",
          url: "index/web/accountSecurity",
          data: {
            user_id,
            status,
            param
          }
        })
          .then(res => {
            console.log(res);
            if (newpassword.status == 200) {
              this.$Notify({ type: "success", message: "修改密码成功..." });
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else if (action === "cancel") {
        done(); //关闭
      }
    },
    //修改手机
    beforeClosePhone(action, done) {
      console.log(window.localStorage.getItem("phone"));
      if (action === "confirm") {
        if (this.newphone == window.localStorage.getItem("phone")) {
          this.$toast("请更换手机号");
          done(false); //不关闭弹框
        } else if (!this.sms || !this.newphone) {
          this.$toast("手机号验证码不能为空");
          done(false); //不关闭弹框
        } else {
          setTimeout(done, 1000);
          let status = "phone";
          let user_id = window.localStorage.getItem("user_id");
          let smscode = this.sms;
          let param = {};
          param.phone = this.newphone;
          console.log(status, user_id, smscode, param);
          this.$http({
            method: "post",
            url: "index/web/accountSecurity",
            data: {
              status,
              user_id,
              smscode,
              param
            }
          })
            .then(res => {
              console.log(res);
              if (newPhone.data.State.Code == 200) {
                this.$Notify({ type: "success", message: "修改手机成功..." });
              } else if (newPhone.data.State.Code == 1600) {
                this.$Notify({
                  type: "danger",
                  message: "请重新发送验证码..."
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      } else if (action === "cancel") {
        done(); //关闭
      }
    },
    //修改邮箱
    beforeCloseMail(action, done) {
      if (action === "confirm") {
        if (!this.mail) {
          this.$toast("邮箱不能为空");
          done(false); //不关闭弹框
        } else if (!this.mailcode) {
          this.$toast("验证码不能为空");
          done(false); //不关闭弹框
        } else {
          setTimeout(done, 1000);
          let mail = this.mail;
          let code = this.MailCode;
          console.log(mail, code);
          this.$http({
            method: "post",
            url: "index/api/register",
            data: {
              mail,
              code
            }
          }).then(res => {
            console.log(res);
          });
        }
      } else if (action === "cancel") {
        done(); //关闭
      }
    },
    //获取公司信息
    async getInfor() {
      let user_id = window.localStorage.getItem("user_id");
      let status = "company";
      await this.$http({
        method: "post",
        url: "index/web/doSelfInfos",
        data: {
          user_id,
          status
        }
      })
        .then(res => {
          console.log(res, "公司信息");
          if (res.data.State.Code == 200) {
            this.oldpassword = res.data.data.password;
            this.phone = res.data.data.phone;
            console.log(this.oldpassword,this.phone)
            if (this.oldpassword) {
              this.icon = "passed";
            } else {
              this.icon = "closed";
            }
            if (this.phone) {
              this.icon2 = "passed";
            } else {
              this.icon2 = "closed";
            }
          } else {
          }
        })
        .catch(err => {
          console.log("获取公司信息接口出现问题...");
        });
    },

    // 发送手机验证码
    async SendMobileCode() {
      let phone = this.newphone;
      let res = await this.$http({
        method: "post",
        url: "index/common/sendMsg",
        data: {
          phone,
          code: "SMS_143540005 " // 暂时用注册的手机验证码  后期应该会更改
        }
      });
      console.log(res);
    },

    //发送短信验证码
    async mailBox() {
      this.innerVisible = true;
      let user_id = window.localStorage.getItem("user_id");
      let mail = this.mail;
      console.log(mail, user_id);
      await this.$http({
        method: "post",
        url: "index/api/sendMail",
        data: {
          user_id,
          mail
        }
      })
        .then(res => {
          console.log(res);
          if (res.data.data.State.Code == 2011) {
            this.$Notify({ type: "danger", message: "邮箱已使用..." });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 数据更新
    dataInit() {
      let phone =  window.localStorage.getItem('phone');
      console.log(phone);
      let _phone = [...phone]; // 字符串转换成数组
      for (let i = 3; i <= 6; i++) {
        _phone[i] = "*";
      }
      let myPhone = _phone.join(""); // 装换成字符串
      this.myPhone = myPhone;
    }
  },
  created() {
 
  },
  mounted() {
     this.getInfor();
    this.dataInit();
  
  }
};
</script>
<style lang='scss' scoped>
.PimRecord3 {
  .van-panel {
    font-weight: 700;
    width: 80%;
    margin: auto;
    div {
      font-size: 14px;
    }
  }
}
.van-button {
  margin: auto;
}
.van-cell__left-icon {
  color:red;
}
</style>